<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        svg {
            background-color: aliceblue;
        }
    </style>
</head>

<body>
    <p>xMinYMin</p>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="none">
    <line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
    <line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
    <line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
    <line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
    <rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
    <rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
    <rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
  </svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMinYMin meet">
    <line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
    <line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
    <line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
    <line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
    <rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
    <rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
    <rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
  </svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMinYMin slice">
    <line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
    <line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
    <line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
    <line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
    <rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
    <rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
    <rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
  </svg>

    <p>xMinYMid</p>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="none">
    <line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
    <line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
    <line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
    <line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
    <rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
    <rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
    <rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
  </svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMinYMid meet">
    <line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
    <line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
    <line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
    <line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
    <rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
    <rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
    <rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
  </svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMinYMid slice">
    <line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
    <line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
    <line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
    <line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
    <rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
    <rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
    <rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
  </svg>

    <p>xMinYMax</p>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="none">
  <line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
  <line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
  <line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
  <line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
  <rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
  <rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
  <rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMinYMax meet">
  <line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
  <line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
  <line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
  <line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
  <rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
  <rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
  <rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMinYMax slice">
  <line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
  <line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
  <line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
  <line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
  <rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
  <rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
  <rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>

    <p>xMidYMin</p>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="none">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMidYMin meet">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMidYMin slice">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>

    <p>xMidYMid</p>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="none">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMidYMid meet">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMidYMid slice">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>

    <p>xMidYMax</p>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="none">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMidYMax meet">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMidYMax slice">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>

    <p>xMaxYMin</p>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="none">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMaxYMin meet">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMaxYMin slice">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>

    <p>xMaxYMid</p>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="none">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMaxYMid meet">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMaxYMid slice">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>

    <p>xMaxYMax</p>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="none">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMaxYMax meet">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>
    <svg style="width:400px; height:200px;" viewBox='0 0 200 200' preserveAspectRatio="xMaxYMax slice">
<line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
<line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
<line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
<rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
<rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
<rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
</svg>

<p>test</p>
<svg style="width:400px; height:200px;" viewBox='0 0 200 80' preserveAspectRatio="xMaxYMax slice">
        <line x1="0" y1="100" x2="400" y2="100" style="stroke:black;stroke-width:1"/>
        <line x1="100" y1="0" x2="100" y2="200" style="stroke:black;stroke-width:1"/>
        <line x1="200" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:1"/>
        <line x1="300" y1="0" x2="300" y2="200" style="stroke:black;stroke-width:1"/>
        <rect x="0" y="0" width="400" height="200" fill="rgba(0,255,0,0.5)"/>
        <rect x="0" y="0" width="200" height="200" fill="rgba(255,0,0,0.5)"/>
        <rect x="100" y="100" width="100" height="100" fill="#FAC4C4"/>
        </svg>
</body>

</html>